<template>
  <div>
    <CommonFilter
      ref="commonFilter"
      :filterConfig="filterConfig"
      :value="filterForm"
    />
    <el-card>
      <CommonList
        :listConfig="listConfig"
        :list="list"
        :pagination="pagination"
        @list-query="listQuery"
        @selection-change="handleSelectionChange"
      />
    </el-card>
    <CommonDialog
      :dialogConfig="modelConfig"
      :curItem="modelForm"
    />
  </div>
</template>

<script>
import CommonFilter from '../../../components/Custom/CommonFilter/index2'
import CommonList from '../../../components/Custom/CommonList/list.vue'
import CommonDialog from '../../../components/Custom/CommonDialog/index2.vue'
import FILTER_TYPE from '../../../components/Custom/CommonFilter/Constant'
import { DATA_TYPE_LABEL } from '@/components/Custom/CommonDialog/Constant'
export default {
  name: 'Test',
  components: {
    CommonFilter,
    CommonList,
    CommonDialog
  },
  data() {
    return {
      filterForm: {
        name: '',
        serviceProviderId: ''
      },
      filterConfig: {
        filterItems: [
          {
            type: FILTER_TYPE.FILTER_TYPE_SEARCH,
            label: '品类名称',
            prop: 'name',
            placeholder: '请输入品类名称'
          },
          {
            type: FILTER_TYPE.FILTER_TYPE_SELECT,
            label: '所属服务商',
            prop: 'serviceProviderId',
            placeholder: '请选择所属服务商',
            optionLabel: 'merchantName',
            optionValue: 'id',
            options: []
          }
        ],
        buttons: [
          {
            name: '查询',
            type: 'primary',
            onClick: () => {
              console.log('aaa=', this.form1)
            }
          },
          {
            name: '重置',
            onClick: () => {
              this.$refs['commonFilter'].resetForm()
              console.log('aaa=', this.form1)
            }
          }
        ]
      },
      listConfig: {
        selectType: 'selection', // // 多选selection／单选index，如果不需要，不设置
        selectable: (row) => {
          console.log(row)
          return true
          // if ([30, 40].includes(Number(row.status))) {
          //   return false // 不可勾选
          // } else {
          //   return true // 可勾选
          // }
        },
        columns: [
          {
            prop: 'name',
            label: '名字'
          },
          {
            prop: 'id',
            label: '名字2'
          },
          {
            prop: 'imgUrl',
            label: '图片',
            type: 'img'
          },
          {
            prop: 'check',
            label: '是否',
            type: 'check',
            change: (val, data) => {
              console.log(val, data.id)
              this.changeTest(val, data)
            }
          },
          {
            prop: 'xiao',
            label: '自定义',
            type: 'custom',
            render: (record) => {
              console.log(record)
              return <a>{ record.xiao }</a>
            }
          }
        ],
        opts: {
          buttons: [
            {
              text: '删除',
              isConfirm: true,
              msg: '此操作将永久删除该文件, 是否继续?',
              disabled: (record) => { return record.id === '1' },
              click: (data) => {
                console.log(data.id)
              }
            },
            {
              text: '查看',
              disabled: (record) => { return record.id === '2' },
              click: (data) => {
                console.log(data.id)
              }
            }
          ]
        }
      },
      modelConfig: {
        formName: 'dialogForm',
        dialogProps: {
          title: '订单作废',
          width: '500px'
        },
        items: [
          {
            label: '订单编号',
            prop: 'goodsOptCode',
            type: DATA_TYPE_LABEL
            // defaultValue: (curItem) => {
            //   return curItem.goodsOptCode || ''
            // }
          },
          {
            label: 'ddd',
            prop: 'goodsOptCode2',
            type: DATA_TYPE_LABEL
            // defaultValue: (curItem) => {
            //   return curItem.goodsOptCode || ''
            // }
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入品类名称', trigger: 'blur' }
          ],
          serviceProviderId: [
            { required: true, message: '请输入品类名称', trigger: 'change' }
          ]
        }
      },
      modelForm: {
        goodsOptCode: '',
        goodsOptCode2: ''
      },
      list: [
        {
          name: 'nihao',
          id: '1',
          imgUrl: 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1602860223&di=6941d2c72276323f3893d9992f6562d6&src=http://a0.att.hudong.com/56/12/01300000164151121576126282411.jpg',
          check: false,
          xiao: 'qq'
        },
        {
          name: 'nihao2',
          id: '2',
          imgUrl: '',
          check: true,
          xiao: 'qq'
        }
      ],
      pagination: {
        total: 11,
        pageNum: 1,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100]
      }
    }
  },
  methods: {
    handleSelectionChange(val) {
      console.log('handleSelectionChange', val)
      // const ids = val.map(item => item.goodsOptCode)
      // this.ids = ids
    },
    listQuery(obj) {
      this.pagination = { ...this.pagination, ...obj }
      console.log('listQuery', this.pagination)
    },
    changeTest(val, row) {
      this.list = this.list.map(item => {
        if (item.id === row.id) {
          item.check = val
        }
        return item
      })
    }
  },
  mounted() {
    this.filterConfig.filterItems.filter(item => item.prop === 'serviceProviderId')[0].options = [{ label: 'name1', value: 1 }]
  }
}
</script>

<style scoped>

</style>
